<template>
	<view class="control">
		<view class="section-2">
			<view class="title flex-align">
				<u-image :src="`${assetsPath}44d8d751bb60e10cc8e83c114d488541605662f5.png`" width="30rpx" height="30rpx"
					shape="square"></u-image>
				<text style="font-size: 32rpx;margin-left: 10rpx;">{{ venue_name }}</text>

			</view>
			<view class="flex-between goods">
				<view class="flex-align con">
					<view class="image">
						<view
							style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
							<image style="width: 100%;height: 250rpx;" :src="datalist.cover" mode="aspectFit"></image>
						</view>
						<!-- <u--image :src="datalist.cover " width="176rpx" height="176rpx" radius="5"></u--image> -->
					</view>
					<view class="info">
						<view>
							<view class="info-1">{{ datalist.name || '' }}</view>
						</view>
						<view>
							<view class="info-1" style="font-size: 24rpx;">{{ datalist.course_name || '' }} <text
									style="margin-left: 20rpx;">{{ datalist.area_name || '' }}</text></view>
						</view>
						<view>
							<view class="info-1" style="font-size: 24rpx;"><text
									style="margin-right: 20rpx;">{{ datalist.program_name || '' }}</text><text>{{ datalist.train_enum_name || '' }}</text>
							</view>
						</view>
						<view class="tag-list flex-align" style="margin-top: 10rpx;">
							<view class="tag" v-if="trainidname1">
								{{trainidname1 }}
							</view>
							<view class="tag" v-if="trainidname2">
								{{trainidname2 }}
							</view>
							<view class="tag" v-if="courselist.sku_name">
								{{courselist.sku_name }}
							</view>
						</view>
						<view style="display:flex;margin-top: 10rpx; ">
							<view class="info-3">
								￥<text>{{price_selling}}</text>x{{amountValue}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="section-3 flex-between">
			<view class="info-1">金额</view>
			<view class="info-2">
				￥<text>{{ amount (price_selling * amountValue) }} </text>
			</view>
		</view>

		<view class="section-4 flex-between" @click="showCoupons = true">
			<view class="flex-align">
				<view class="info-1">招生老师</view>
			</view>
			<view class="info-2 flex-align">
				<input type="text" placeholder="请选择招生老师" disabled v-model="occupation_relation"
					@click="showoccupation = true" class="catname" />
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<u-picker :show="showoccupation" :columns="occupation_status" keyName="nickname" @confirm="addoccupation"
			@cancel="showoccupation = false">
		</u-picker>
		<view class="section-4 flex-between" @click="showCoupons = true">
			<view class="flex-align">
				<view class="info-1">培训教练</view>
			</view>
			<view class="info-2 flex-align">
				<input type="text" placeholder="请选择培训教练" disabled v-model="occupation_jineng" @click="showjineng = true"
					class="catname" />
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<u-picker :show="showjineng" :columns="jineng_status" keyName="full_name" @confirm="addjineng"
			@cancel="showjineng = false">
		</u-picker>

		<view class="section-4 flex-between">
			<view class="flex-align">
				<view class="info-1">次数</view>
			</view>
			<view class="info-2 flex-align">
				<input type="number" placeholder="次数" disabled v-model="coursearr.hour_num" class="catname" />
			</view>
		</view>

		<view class="section-4 flex-between" @click="showCoupons = true" v-if="extra_num_list == true">
			<view class="flex-align">
				<view class="info-1">赠次</view>
			</view>
			<view class="info-2 flex-align">
				<input type="text" placeholder="请选择赠次" disabled v-model="occupation_xcx" @click="showxcx = true"
					class="catname" />
				<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
			</view>
		</view>
		<u-picker :show="showxcx" :columns="xcx_status" keyName="label" @confirm="addxcx" @cancel="showxcx = false">
		</u-picker>

		<view class="section-4 flex-between">
			<view class="flex-align">
				<view class="info-1">优惠减免</view>
			</view>
			<view class="info-2 flex-align">
				<input type="number" placeholder="优惠减免" v-model="discount_amount" class="catname" @input="onmoney"
					style="color: #ff0000;" :maxlength="amountLength" @blur="on_money" />
			</view>
		</view>

		<view class="section-4">
			<view style="flex-direction: column;display: flex;">
				<view class="info-1" style="color: #ff0000;">请基于学员数量单张逐一单张上传合同协议</view>
				<view class="info-1" style="color: #ff0000;">合同协议图片上传最多（9张）</view>
			</view>
			<view class=" flex-align" style="margin-top: 10rpx;">
				<van-uploader @delete="deleteImg5" :deletable="true" :fileList="fileList5" @after-read="afterRead5"
					max-count="9" />
			</view>
		</view>

		<view class="section-4">
			<view class="flex-align">
				<view class="info-1">备注</view>
			</view>
			<view class=" flex-align" style="margin-top: 10rpx;">
				<u-textarea v-model="remark" placeholder="备注信息，28字以内" maxlength='28' height="80rpx"></u-textarea>
			</view>
		</view>

		<view class="footer flex-between">
			<view class="footer-1 flex-align">
				应付：
				<view class="footer-1 flex-align">
					<view class="info">
						￥<text style="font-weight: 700;font-size: 32rpx;">{{ amount (amountselling) }}</text>
					</view>
				</view>
			</view>
			<view class="footer-btn" @click="$noMultipleClicks(submit)"> 提交订单 </view>
		</view>
		<u-popup @touchmove.stop :show="showInfo" @close="closeInfo" closeOnClickOverlay mode="bottom" style=""
			round="15">
			<view class="store-popup">
				<view class="title flex-between">
					<u-tabs :list="list1" :activeStyle="{ fontWeight: 700 }" :inactiveStyle="{ color: '#999999' }"
						@click="tabClick"></u-tabs>
					<u-icon @click="closeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<!-- <scroll-view class="form" v-if="not_use == 0" scroll-y="true">
					<radio-group @change='change1'>
						<label class="item flex-align" v-for="(item,index) in payList" :key="index">
							<image mode="aspectFit" :src="item.cover"></image>
							<view class="flex-between item-con">
								<view style="display: flex;flex-direction: row; ">{{item.name}}</view>
								<radio :value="index" color=" #2f75fa" :checked="index == 0 ? true : false"
									@change="radioChange(item)" />
							</view>
						</label>
					</radio-group>
				</scroll-view>
				<view class="form" v-if="not_use == 1" scroll-y="true">
					<radio-group @change='change2'>
						<label class="item flex-align" v-for="(item,index) in pay_List" :key="index">
							<image mode="aspectFit" :src="item.cover"></image>
							<view class="flex-between item-con">
								<view style="display: flex;flex-direction: row; ">{{item.name}}</view>
								<radio :value="index" color=" #2f75fa" :checked="index == 0 ? true : false"
									@change="radioChange(item)" />
							</view>
						</label>
					</radio-group>
				</scroll-view> -->
				<view class="form" v-if="not_use == 0" scroll-y="true">
					<view class="tag-list">
						<view v-for="(item2, index2) in payList" :key="index2" @click="selectSpec3(index2, item2)"
							style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;padding-right: 20rpx;">
							<view class="spec-value" :class="index2 ==spcindex3 ? 'text_color' : ''">
								{{ item2.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="form" v-if="not_use == 1" scroll-y="true">
					<view class="tag-list">
						<view v-for="(item2, index2) in pay_List" :key="index2" @click="selectSpec4(index2, item2)"
							style="display: flex;flex-direction: column; ;align-items: center;  justify-content: center; flex-wrap: wrap;padding-right: 20rpx;">
							<view class="spec-value" :class="index2 == spcindex4 ? 'text_color' : ''">
								{{ item2.name }}
							</view>
						</view>
					</view>
				</view>
				<view class="section-4" v-if="not_use == 1">
					<view class="flex-direction: column;display: flex;">
						<view class="info-1" style="color: #ff0000;">请基于合同协议图片顺序上传转账记录图片</view>
						<view class="info-1" style="color: #ff0000;">转账记录图片上传（9张）</view>
					</view>
					<view class=" flex-align" style="margin-top: 10rpx;">
						<van-uploader @delete="deleteImg6" :deletable="true" :fileList="fileList6"
							@after-read="afterRead6" max-count="9" />
					</view>
				</view>
				<view class="footer">
					<view class="btn" @click="$noMultipleClicks(href)">确认支付</view>
				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="homeInfo" @close="closehomeInfo" closeOnClickOverlay mode="center" round="15">
			<view class="storepopup">
				<view class="title flex-between">
					<text>购买详情</text>
					<u-icon @click="closehomeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view>
				<view class="" style="color: #FFFFFF;text-align: center;margin: 20rpx 0;">
					<view class="flex-between goods">
						<view class="flex-align con">
							<view class="image">
								<u--image :src="datalist.cover " width="150rpx" height="176rpx" radius="5"></u--image>
							</view>
							<view class="info">
								<view>
									<view class="info-1">{{ datalist.name }}</view>
								</view>
								<view class="tag-list flex-align">
									<view class="tag" v-if="trainidname1">
										{{trainidname1 }}
									</view>
									<view class="tag" v-if="trainidname2">
										{{trainidname2 }}
									</view>
								</view>
								<view class="tag-list flex-align" style="margin-top: 10rpx;" v-if="courselist.sku_name">
									<view class="tag">
										{{courselist.sku_name }}
									</view>
								</view>
								<view style="display:flex;margin-top: 10rpx; ">
									<view class="info-3">
										￥<text>{{price_selling}}</text>x{{amountValue}} <text
											v-if="discount_amount">(优惠减免￥{{discount_amount}})</text> </view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<scroll-view style="width: 100%;height: 380rpx;margin-top: 30rpx;" scroll-y="true">
					<label class="item flex-between" v-for="(item, index) in paylist.items" :key="index">
						<view class="flex-align">
							<u--image width="50" height="50" shape="circle" :src="item.head_img">
							</u--image>
							<view class="info">
								<view class="name">{{ item.student_name }}</view>
								<view class="phone">{{ item.owner }}</view>
							</view>
							<view class="info">
								<view class="name">￥{{ item.order_money }}</view>
								<view class="phone" style="color: #ff0000;" v-if=" item.preferential_money">
									优惠减免(￥{{ item.preferential_money }})</view>
							</view>
						</view>
					</label>
				</scroll-view>
				<view class="" style="display: flex;justify-content: center;align-items: center;margin-top: 20rpx;"
					@click="closehomeInfo()">
					<view
						style="width: 380rpx; height: 80rpx;background: linear-gradient(0deg, #528eff, #2f75fa);text-align: center;line-height: 80rpx;color: #fff;margin-bottom: 45rpx;border-radius: 40rpx;">
						我知道了
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				noClick: true,
				assetsPath: this.$https.assetsPath,
				amountValue: "",
				price_selling: "",
				datalist: {},
				venue_name: '',
				courselist: [],
				coursearr: {},
				showxcx: false,
				xcx_status: [],
				occupation_status: [],
				showjineng: false,
				jineng_status: [],
				occupation_jineng: false,
				showoccupation: false,
				occupation_xcx: 0,
				occupation_xcx_id: "",
				occupation_relation: '',
				occupation_relation_id: '',
				occupation_jineng: '',
				occupation_jineng_id: '',
				fileList5: [],
				fileList6: [],
				venue_id: '',
				course_item_id: '',
				coach_id: '',
				remark: '',
				students: [],
				trainidname1: "",
				trainidname2: "",
				extra_num_list: false,
				venue_name: '',
				showInfo: false,
				payList: [],
				pay_List: [],
				list1: [{
						name: "扫码支付"
					},
					{
						name: "记账"
					},
				],
				not_use: 0,
				paylist: {},
				homeInfo: false,
				spcindex3: 0,
				spcindex4: 0,
				discount_amount: '',
				amountselling: '',
				amountLength: ''
			};
		},
		onLoad(options) {
			this.venue_name = options.venue_name;
			this.occupation_relation = uni.getStorageSync("nickname")
			this.occupation_relation_id = uni.getStorageSync("nickid")
			this.coach_id = options.coach_id
			this.course_item_id = options.course_item_id
			this.trainidname1 = options.trainidname1
			this.trainidname2 = options.trainidname2
			this.occupation_jineng = options.trainidname2
			const datalist = JSON.parse(decodeURIComponent(options.datalist))
			this.datalist = datalist;
			console.log(this.datalist, 'this.datalist')
			this.amountValue = options.selectLength
			const courselists = JSON.parse(decodeURIComponent(options.courselist))
			this.courselist = courselists
			console.log(courselists, 'courselists')
			this.coursearr = courselists
			this.price_selling = options.price_selling
			this.students = JSON.parse(decodeURIComponent(options.students))
			console.log(this.students, 'this.students')
			if (courselists.extra_num_list) {
				let relationList = courselists.extra_num_list
				this.xcx_list = Object.entries(relationList).map(([id, label]) => ({
					id: parseInt(id),
					label
				}));
				this.xcx_status.push(
					this.xcx_list
				)
				this.extra_num_list = true
			}
			this.venue_id = options.venue_id
			this.amountselling = this.price_selling * this.amountValue
			this.amountLength = this.amountselling.toString().length;
			console.log(this.amountLength, 'this.amountLength')
			this.shuju()
			this.pay_list()
		},

		methods: {
			onmoney(e) {
				let that = this
				let money = e.detail.value
				let selling = that.price_selling * that.amountValue
				console.log(e.detail.value, 'e')
				if (Number(selling) >= Number(money)) {
					that.amountselling = that.price_selling * that.amountValue - money
				} else {
					that.amountselling = 0
					that.discount_amount = that.price_selling * that.amountValue
				}
				console.log(that.discount_amount, 'that.discount_amount')
			},
			on_money() {
				let that = this
				let selling = that.price_selling * that.amountValue
				if (Number(selling) < Number(that.discount_amount)) {
					that.amountselling = 0
					that.discount_amount = that.price_selling * that.amountValue
				}
				console.log(that.discount_amount, 'that.discount_amount111')
			},
			closehomeInfo() {
				this.homeInfo = false
				uni.reLaunch({
					url: './index'
				})
			},
			async href() {
				if (this.not_use == 0) {
					// this.pay_id = this.payList[0].id
					// this.payChoose = this.payList[0]
					// for (let i = 0; i < this.payList.length; i++) {
					// 	if (this.payList[i].checked) {
					// 		this.pay_id = this.payList[i].id
					// 		this.payChoose = this.payList[i]
					// 		break
					// 	}
					// }
				} else if (this.not_use == 1) {
					// this.pay_id = this.pay_List[0].id
					// this.payChoose = this.pay_List[0]
					// for (let i = 0; i < this.pay_List.length; i++) {
					// 	if (this.pay_List[i].checked) {
					// 		this.pay_id = this.pay_List[i].id
					// 		this.payChoose = this.pay_List[i]
					// 		break
					// 	}
					// }
					if (this.fileList6.length == 0) {
						uni.showToast({
							title: '请上传支付凭证',
							icon: 'none'
						})
						return
					}
				}

				const urlsArray6 = this.fileList6.map(imageObject => imageObject.url);
				let params = {
					id: this.paylist.id,
					pay_type: this.payChoose.type, //支付类型：1线上，2记账
					pay_id: this.payChoose.id, //支付方式id
					pay_cert_url: urlsArray6, //支付凭证
					pay_amount: '', //支付金额，暂时不用，防止后续需要优惠用到
					remark: '', //备注
					venue_id: this.venue_id, //场馆id
				}
				console.log(params, 'params')
				let res = await venues.orderpay(params)
				if (res.code === 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none',
					})
					this.showInfo = false
					setTimeout(() => {
						this.homeInfo = true
					}, 500)
				} else {
					uni.showToast({
						title: res.info,
						icon: 'none',
					})
				}

			},
			tabClick(e) {
				let that = this
				that.not_use = e.index
				console.log(that.not_use, 'that.not_use')
			},
			closeInfo() {
				this.showInfo = false;
			},
			change1(e) {
				this.panduan = 1
				let that = this
				let i = e.detail.value
				const item = this.payList[i]
				if (item) {
					this.payChoose = item
					this.payList[i].checked = true
				} else {
					this.payChoose = {}
				}
				console.log(this.payChoose, 'this.payChoose')
			},
			change2(e) {
				this.panduan = 1
				let that = this
				let i = e.detail.value
				const item = this.pay_List[i]
				if (item) {
					this.payChoose = item
					this.pay_List[i].checked = true
				} else {
					this.payChoose = {}
				}
				console.log(this.payChoose, 'this.payChoose')
			},

			selectSpec3(index2, item2) {
				this.spcindex3 = index2
				this.payChoose = item2
			},

			selectSpec4(index2, item2) {
				this.spcindex4 = index2
				this.payChoose = item2
			},

			async shuju() {
				let params = {
					venue_id: this.venue_id
				}
				let res = await venues.studenttrain_conf(params)
				if (res.code === 1) {
					this.operatorList = res.data.operatorList
					this.jineng_list = res.data.coachList
				}
				this.occupation_status.push(
					this.operatorList
				)
				this.jineng_status.push(
					this.jineng_list
				)
			},
			addxcx(e) {
				this.occupation_xcx = e.value[0].label
				this.occupation_xcx_id = e.value[0].id
				this.showxcx = false
			},
			// 招生老师
			addoccupation(e) {
				this.occupation_relation = e.value[0].nickname
				this.occupation_relation_id = e.value[0].id
				this.showoccupation = false
			},
			// 培训教练
			addjineng(e) {
				this.occupation_jineng = e.value[0].full_name
				this.occupation_jineng_id = e.value[0].id
				this.showjineng = false
			},
			async submit() {
				let that = this
				// if (!that.occupation_jineng) { 
				// 	uni.showToast({
				// 		title: '请选择培训教练',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// this.showInfo = true
				let order_money = this.price_selling * this.amountValue
				const urlsArray5 = that.fileList5.map(imageObject => imageObject.url);
				let postData = {
					output: "json",
					train_id: this.datalist.id,
					venue_id: this.venue_id,
					sale_venue_id: this.venue_id,
					sku_id: this.coursearr.id,
					course_item_id: this.coursearr.course_item_id,
					free_recharge: false,
					hour_num: 0,
					enroll_hour_num: this.coursearr.enroll_hour_num,
					course_extra_num: this.occupation_xcx,
					order_money: order_money,
					coach_id: this.coach_id,
					remark: this.remark,
					// contract_img: urlsArray5[0],
					operator_id: this.occupation_relation_id,
					stu_infos: this.students,
					contract_img: urlsArray5,
					train_coach_id: this.occupation_jineng_id,
					discount_amount: this.discount_amount
				};
				console.log(postData, 'postData')
				let res = await venues.trainenroll(postData);
				if (res.code == 1) {
					this.paylist = res.data
					uni.navigateTo({
						url: `./pay?datalist=${encodeURIComponent(JSON.stringify(this.datalist))}` +
							"&venue_id=" + this.venue_id +
							"&coach_id=" + this.coach_id + "&course_item_id=" + this.course_item_id +
							"&selectLength=" + this.amountValue + "&trainidname1=" + this.trainidname1 +
							"&trainidname2=" + this.trainidname2 + "&venue_name=" + this.venue_name +
							"&price_selling=" + this.price_selling + "&courselist=" +
							encodeURIComponent(JSON.stringify(this.courselist)) +
							"&students=" + encodeURIComponent(JSON.stringify(this.students)) + "&paylist=" +
							encodeURIComponent(JSON.stringify(this.paylist)) + "&amountselling=" + this.amountselling,
					});
				}
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			afterRead5(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList5 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList5 = fileList;
					},
				});
			},
			deleteImg5(event) {
				const index = event.detail.index;
				this.fileList5.splice(index, 1);
				// this.fileList.splice(event.detail, 1);
			},
			afterRead6(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList6 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList6 = fileList;
					},
				});
			},
			deleteImg6(event) {
				const index = event.detail.index;
				this.fileList6.splice(index, 1);
				// this.fileList.splice(event.detail, 1);
			},
			// 记账方式
			async pay_list() {
				let params = {
					venue_id: this.venue_id
				}
				let res = await venues.pay_list(params)
				if (res.code === 1) {
					this.pay_List = res.data.pay_list
					this.payChoose = res.data.pay_list[0]
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		background-color: #f3f3f3;
		padding: 0px 30rpx;
		padding-top: 1rpx;
		padding-bottom: 150rpx;
		box-sizing: border-box;
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5af2e5b772f1e1c1eb7d3bfabe9cdc4838551525.png");
		background-repeat: no-repeat;
		background-position: 0% -200rpx;
		position: relative;
		background-size: 100% auto;


		.section-2 {
			padding: 30rpx 30rpx;
			margin-top: 30rpx;
			background-color: white;
			border-radius: 7px 7px 0 0;



			.title {
				font-size: 26rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}

			.goods {
				.con {
					height: 210rpx;

					.image {
						width: 200rpx;
						height: 250rpx;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}

					}

					// .image {
					// 	// width: 150rpx;
					// 	// height: 100%;

					// 	/deep/ .vue-ref {
					// 		width: 100%;
					// 		height: 100%;
					// 	}
					// }

					.info {
						margin-left: 30rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;

						.info-1 {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
							margin-bottom: 10rpx;
							text-align: left;
						}

						.tag-list {
							.tag {
								font-size: 22rpx;
								font-weight: 500;
								color: #4483fb;
								padding: 0 10rpx;
								margin-right: 10rpx;
								// background-color: #4483fb;
								border: #4483fb 1rpx solid;
								border-radius: 2px;
							}
						}

						.info-2 {
							background-color: #efefef;
							font-size: 22rpx;
							border-radius: 5rpx;
							color: #a6a6a6;
							padding: 5rpx 20rpx;
						}

						.info-3 {
							font-size: 22rpx;
							font-weight: 500;
							color: #ff4105;

							text {
								font-size: 28rpx;
								font-weight: 700;
							}
						}
					}
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}
			}
		}

		.section-3 {
			padding: 30rpx 30rpx;
			// margin-top: 30rpx;
			background-color: white;
			border-radius: 0px 0px 7px 7px;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 22rpx;
				font-weight: 500;
				color: #ff4105;

				text {
					font-weight: 700;
					font-size: 28rpx;
				}
			}
		}

		.section-4 {
			padding: 30rpx 30rpx;
			/* margin-top: 30rpx; */
			background-color: white;
			/* border-radius: 7px; */
			border-bottom: #f3f3f3 1rpx solid;

			.info-1 {
				font-size: 26rpx;
				font-weight: 500;
				color: #000000;
			}

			.info-2 {
				font-size: 26rpx;
				color: #bebebe;
				margin-left: 30rpx;

				.catname {
					color: #999;
					margin-left: 10rpx;
					font-size: 26rpx;
				}

				input {
					text-align: right;
				}
			}

			.active {
				color: #ff4105 !important;
			}

			.info-3 {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				margin-right: 10rpx;
			}
		}

		.footer {
			background: #ffffff;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;

			.footer-1 {
				font-size: 28rpx;
				color: #333333;

				.info {
					font-size: 22rpx;
					color: #ff4105;

					text {}
				}
			}

			.footer-btn {
				padding: 20rpx 50rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #ffffff;
				background: linear-gradient(0deg, #528eff, #2f75fa);
				border-radius: 40rpx;
			}
		}

		.storepopup {
			height: 50vh;
			padding: 20rpx 20rpx;
			width: 600rpx;

			.goods {
				.con {
					height: 150rpx;

					.image {
						// width: 150rpx;
						// height: 100%;

						/deep/ .vue-ref {
							width: 100%;
							height: 100%;
						}
					}

					.info {
						margin-left: 30rpx;
						display: flex;
						height: 100%;
						flex-direction: column;
						justify-content: space-between;

						.info-1 {
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
							margin-bottom: 10rpx;
						}

						.tag-list {
							.tag {
								font-size: 22rpx;
								font-weight: 500;
								color: #4483fb;
								padding: 0 10rpx;
								margin-right: 10rpx;
								// background-color: #4483fb;
								border: #4483fb 1rpx solid;
								border-radius: 2px;
							}
						}

						.info-2 {
							background-color: #efefef;
							font-size: 22rpx;
							border-radius: 5rpx;
							color: #a6a6a6;
							padding: 5rpx 20rpx;
						}

						.info-3 {
							font-size: 22rpx;
							font-weight: 500;
							color: #ff4105;

							text {
								font-size: 28rpx;
								font-weight: 700;
							}
						}
					}
				}

				/deep/ .u-number-box {
					.u-number-box__minus,
					.u-number-box__plus,
					.u-number-box__input {
						width: 45rpx !important;
						font-size: 24rpx !important;
						height: 45rpx !important;

						text {
							font-size: 24rpx !important;
						}
					}

					.u-number-box__input {
						background-color: transparent !important;
					}
				}
			}

			.form {
				box-sizing: border-box;
				height: 26vh;

				.tag-list {
					display: flex;
					flex-wrap: wrap;
				}

				.spec-value {
					padding: 5rpx 10rpx;
					margin: 5px;
					border: #f0f0f0 1rpx solid;
					font-size: 24rpx;
				}

				.text_color {
					padding: 5rpx 10rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #2672eb;
					font-size: 24rpx;
				}

				.text_color1 {
					padding: 5rpx 10rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #ffffff;
					font-size: 24rpx;
				}

				.item {
					padding: 0rpx 30rpx;
					background-color: white;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.item-con {
						flex: 1;
						width: 0;
						font-size: 26rpx;
						padding: 30rpx 0;
						color: #333333;
						border-bottom: 1px solid #EFEFEF;

						.pirce {
							color: #888888;
						}
					}

					radio {
						transform: scale(0.8);
					}
				}
			}

			.item {
				margin-bottom: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #2f75fa;
				}
			}

			.btn {
				padding: 0px 30rpx;
				margin-top: 20rpx;
			}

			.footer {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				padding: 20rpx 30rpx 60rpx 30rpx;
				// background-color: white;

				.btn {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					// background: linear-gradient(0deg, #FC484C, #F72746);
					border-radius: 50rpx;
					background: linear-gradient(270deg, #699cfa 0%, #6499fa 100%, #2f75fa 0%);
					// border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.btn_t {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
					border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}

		.store-popup {
			height: 50vh;
			padding: 20rpx 0;

			.form {
				box-sizing: border-box;
				// height: 10vh;

				.tag-list {
					display: flex;
					flex-wrap: wrap;
					margin-left: 30rpx;
				}

				.spec-value {
					padding: 5rpx 14rpx;
					margin: 5px;
					border: #f0f0f0 1rpx solid;
					font-size: 28rpx;
				}

				.text_color {
					padding: 5rpx 14rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #2672eb;
					font-size: 28rpx;
				}

				.text_color1 {
					padding: 5rpx 14rpx;
					margin: 5px;
					color: #2672eb;
					border: 1rpx solid #ffffff;
					font-size: 28rpx;
				}

				.item {
					padding: 0rpx 30rpx;
					background-color: white;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.item-con {
						flex: 1;
						width: 0;
						font-size: 26rpx;
						padding: 40rpx 0;
						color: #333333;
						border-bottom: 1px solid #EFEFEF;

						.pirce {
							color: #888888;
						}
					}

					radio {
						transform: scale(0.8);
					}
				}
			}

			.item {
				margin-top: 30rpx;

				.info {
					margin-left: 20rpx;

					.name {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
					}

					.phone {
						font-size: 24rpx;
						font-weight: 500;
						color: #bebebe;
						margin-top: 10rpx;
					}
				}
			}

			.title {
				padding: 0px 30rpx;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: 1px solid #cccccc;
				font-weight: bold;

				.clo {
					color: #2f75fa;
				}
			}

			.btn {
				padding: 0px 30rpx;
				margin-top: 20rpx;
			}

			.footer {
				position: absolute;
				width: 100%;
				left: 0;
				bottom: 0;
				padding: 20rpx 30rpx 60rpx 30rpx;
				// background-color: white;

				.btn {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					// background: linear-gradient(0deg, #FC484C, #F72746);
					border-radius: 50rpx;
					background: linear-gradient(270deg, #699cfa 0%, #6499fa 100%, #2f75fa 0%);
					// border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.btn_t {
					text-align: center;
					width: 100%;
					padding: 22rpx 0;
					background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
					border-radius: 19px;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}
	}
</style>